HTML <article> Element

Ever noticed any blog posts or newspaper articles where there is standalone content in some parts of the page? Here is where the <article> element plays a role. <article> element specifies independent, self-contained content.

Sample Code Snippet:

<article class=”my-article”>
<header>
 <h2> Do you love to code? </h2>
</header>
<p> Here’s where I learned coding from – Geeks for Geeks. Get your coding skills sharpened here </p>
</article>

Have you noticed how different each webpage on the internet is designed and structured?

Just imagine the elements on a page not structured the way it is! It would be clumsy, Right? And yes, as we know the most common element we use for the whole purpose is <div> in HTML while we design our page. <div>, being an abbreviation for division is a tag used to define a division or section of an HTML page. It is a block-level tag that serves as a container of elements comprising groups of various tags of HTML so that the sections are then styled or manipulated using the class or id attribute. 

<div class=” div tag ”>
<h3> Ready to explore! </h3>
<p> Let us look into some alternatives for the div tag here. </p>
</div>
However, as we plan to split into more blocks or structures, we tend to use a lot of <div> tags within a <div> tag. Say, the code might look like,
<div>
<div>
 <div>
  <!– The required code here. –>
 </div>
</div>
</div>

This condition is known as a “div soup”. This could cause a readability issue, where we might not understand the code later, that is, a high number of <div> tags may make the source of the HTML page less human-readable but there is no real performance hit because of their use. Further, deciphering the code would become more tedious. Here is where Semantic HTML comes into play.

It is processed by traditional web browsers and many other agents as well. In the following article, we will look into the best alternatives to <div>. The elements mentioned might be the commonly used ones, still, let us dive deep into their usage and how they serve as an alternative.

This article answers some of the most frequently asked questions on div tag:

• What is a div tag?
• What to use instead of div in HTML5?
• What are the alternatives to div tag?

What is Semantic HTML?

Semantic HTML elements not only make the webpage simpler but also helps the developer to understand the code with ease when it requires a review later. In layman’s terms, it clearly describes the meaning to both the developer and the browser. <nav>, <header>, <article> are examples of semantic elements. On the contrary, elements such as <div>, <span>, etc fall under non-semantic elements. Semantic HTML is also very helpful for accessibility.

The 10 Best Alternatives to the <div> HTML Tag are as: